<template>
  <div class="business-reports">
    <Header :storeName="infoData.store" :website="infoData.website" />
    <div class="container">
      <div class="menu-wrapper">
        <div class="close-menu">
          <img src="../../assets/images/close_black.png" alt="" />
          <span>CLOSE REPORTS MENU</span>
        </div>
        <div class="list">
          <div class="caption">Dashboards</div>
          <ul>
            <li class="active">Sales Dashboard</li>
          </ul>
        </div>
        <div class="list">
          <div class="caption">Business Reports</div>
          <div class="c-title">By Date</div>
          <ul>
            <li>Sales and Traffic</li>
            <li>Detail Page Sales and Traffic</li>
            <li>Seller Performance</li>
          </ul>
          <div class="c-title">By ASIN</div>
          <ul>
            <li>Detail Page Sales and Traffic</li>
            <li>Detail Page Sales and Traffic By Parent Item</li>
            <li>Detail Page Sales and Traffic By Child Item</li>
            <li v-if="isBrand">Brand Performance</li>
          </ul>
          <template v-if="isBrand">
            <div class="c-title">Other</div>
            <ul>
              <li>Sales and Orders by Month</li>
            </ul>
          </template>
        </div>
      </div>
      <div class="content">
        <div class="head">
          <div class="head-left">
            <span class="title">Sales Dashboard</span>
            <span class="more">Learn more</span>
          </div>
          <div class="head-right">
            <div class="btn">Refresh</div>
            <div class="btn light">Download</div>
          </div>
        </div>
        <div class="filter-wrapper">
          <div class="filter-item">
            <div class="label">Date</div>
            <a-select default-value="custom" style="width: 330px">
              <a-select-option value="1">Tody to date - 2/11/2023</a-select-option>
              <a-select-option value="2">Week to date - 2/11/2023</a-select-option>
              <a-select-option value="3">Month to date - 2/11/2023</a-select-option>
              <a-select-option value="4">Year to date - 2/11/2023</a-select-option>
              <a-select-option value="custom">Custom</a-select-option>
            </a-select>
            <div class="date-range">
              <div class="date-item">
                <div class="date-item-left">
                  <img src="../../assets/images/icon_calendar.png" alt="" />
                </div>
                <div class="date-item-right">{{ moment(queryParams.time_begin).format('M/D/YYYY') }}</div>
                <a-date-picker class="a-date-picker" v-model="queryParams.time_begin" />
              </div>
              <div class="date-item">
                <div class="date-item-left">
                  <img src="../../assets/images/icon_calendar.png" alt="" />
                </div>
                <div class="date-item-right">{{ moment(queryParams.time_end).format('M/D/YYYY') }}</div>
                <a-date-picker class="a-date-picker" v-model="queryParams.time_end" />
              </div>
            </div>
          </div>
          <div class="filter-item">
            <div class="label">Sales breakdown</div>
            <a-select default-value="1" style="min-width: 200px">
              <a-select-option value="1">Marketplace total</a-select-option>
              <a-select-option value="2">Business buyers</a-select-option>
              <a-select-option value="3">Non-business buyer</a-select-option>
            </a-select>
          </div>
          <div class="filter-item">
            <div class="label">Fulfillment channel</div>
            <a-select default-value="1" style="min-width: 200px">
              <a-select-option value="1">Both(Amazon and seller)</a-select-option>
              <a-select-option value="2">Amazon</a-select-option>
              <a-select-option value="3">Seller</a-select-option>
            </a-select>
          </div>
          <div class="btn" style="margin-top: 16px;cursor: pointer;" @click="handleApply">Apply</div>
        </div>
        <div class="snapshot">
          <div class="snapshot-head">
            <div class="tit">Sales Snapshot</div>
            <div class="tit_s">taken at {{ infoData.snapshot_time }}</div>
          </div>
          <div class="snapshot-cont">
            <ul>
              <li>
                <span class="name">Total order items</span><span class="txt">{{
                  infoData.total_order_items |
                    formatAmount
                }}</span>
              </li>
              <li>
                <span class="name">Units ordered</span><span class="txt">{{
                  infoData.units_ordered |
                    formatAmount
                }}</span>
              </li>
              <li>
                <span class="name">Ordered product sales</span><span class="txt">${{
                  infoData.ordered_product_sales |
                    formatAmount
                }}</span>
              </li>
              <li>
                <span class="name">Avg. units/order item</span><span class="txt">{{
                  infoData['avg_units/order_item'] |
                    formatAmount
                }}</span>
              </li>
              <li>
                <span class="name">Avg. sales/order item</span><span class="txt">${{
                  infoData['avg_sales/order_item'] |
                    formatAmount
                }}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="azure">
          <div class="azure-head">
            <div class="tit">Compare sales</div>
            <div class="btns">
              <div class="azure-btn active">Graph view</div>
              <div class="azure-btn">Table view</div>
            </div>
          </div>
          <div class="chart-wrap">
            <div class="chart-item">
              <div class="chart-title">Units ordered</div>
              <div class="chart-box" id="chart1"></div>
            </div>
            <div class="chart-item">
              <div class="chart-title">Ordered product sales</div>
              <div class="chart-box" id="chart2"></div>
            </div>
          </div>
          <div class="azure-compare">
            <div class="compare-item caption">
              <div class="caption-tit">Compare</div>
              <div class="what">What’s this</div>
            </div>
            <div class="compare-item" v-if="infoData.selected_date_range === 1">
              <div class="select">
                <img src="../../assets/images/icon_tick.png" alt="" />
              </div>
              <div class="cont">
                <div class="tit">Selected date range</div>
                <div class="tit_s">{{ infoData.units_ordered | formatAmount }}<span>Units</span></div>
                <div class="tit_s">${{ infoData.ordered_product_sales | formatAmount }}</div>
              </div>
            </div>
            <div class="compare-item" v-if="infoData.selected_date_range_one_year_ago === 1">
              <div class="select">
                <img src="../../assets/images/icon_tick.png" alt="" />
              </div>
              <div class="cont">
                <div class="tit" style="color: rgb(224, 45, 0)">
                  Same date range one year ago
                </div>
                <div class="tit_s">{{ infoData.last_units_ordered | formatAmount }}<span>Units</span></div>
                <div class="tit_s">${{ infoData.last_ordered_product_sales | formatAmount }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
    <Feedback></Feedback>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import dayjs from 'dayjs'
import moment from 'moment'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import Feedback from '@/components/Feedback.vue'
import { get_amazon_dashboard } from '@/api/index.js'
export default {
  components: { Header, Footer, Feedback },
  data () {
    return {
      isBrand: false,
      infoData: {},
      datas: [],
      queryParams: {
        time_begin: moment('1/1/2022').startOf('day'), // 2022-01-01
        time_end: moment('1/31/2023').startOf('day')
      }
    }
  },
  async mounted () {
    this.init()
  },
  methods: {
    moment,
    handleApply () {
      this.init()
    },
    async init () {
      await this.get_amazon_dashboard()
      this.initEcharts1()
      this.initEcharts2()
    },
    async get_amazon_dashboard () {
      const res = await get_amazon_dashboard({
        time_begin: this.queryParams.time_begin.valueOf(),
        time_end: this.queryParams.time_end.valueOf()
      })
      console.log(res, get_amazon_dashboard)
      this.isBrand = Boolean(res.is_brand)
      this.infoData = res
      this.datas = res.datas
    },
    calcInterval () {
      const mounthDiff = Math.abs(dayjs(this.queryParams.time_end).diff(dayjs(this.queryParams.time_begin), 'month'))
      console.log(mounthDiff, 'mounthDiff')
      if (mounthDiff === 0) {
        return 1
      } else if (mounthDiff >= 6 && mounthDiff <= 9) {
        return 30
      } else if (mounthDiff >= 10 && mounthDiff <= 15) {
        return 30 * 2
      } else if (mounthDiff >= 16) {
        return 30 * 3
      } else {
        return null
      }
    },
    initEcharts1 () {
      var chartDom = document.getElementById('chart1')
      var myChart = echarts.init(chartDom)
      var option

      const dateList = this.datas.map(function (item) {
        return item.date
      })
      const units_orderedList = this.datas.map(function (item) {
        return item.units_ordered
      })
      const last_units_orderedList = this.datas.map(function (item) {
        return item.last_units_ordered
      })
      // 是否相同月份
      const isSameMonth = dayjs(this.queryParams.time_begin).isSame(dayjs(this.queryParams.time_end), 'month')
      option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: '10%',
          left: '5%',
          right: '0%',
          bottom: '8%',
          containLabel: true
        },
        // dataZoom: [
        //   {
        //     type: 'inside',
        //     // maxValueSpan: 150,
        //     // startValue: '2014-06-01'
        //   },
        //   {
        //     type: 'slider',
        //     show: false
        //   }
        // ],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: dateList,
          axisLabel: {
            color: '#666666',
            align: 'center',
            formatter: function (value, index) {
              if (isSameMonth) {
                return `${dayjs(Number(value)).format('D')}. ${dayjs(Number(value)).format('MMM')}`
              } else {
                const currentTimestamp = dateList[index]
                return `${dayjs(Number(currentTimestamp)).format('MMM')} '${dayjs(Number(currentTimestamp)).format('YY')}`
                // return `${dayjs(Number(value)).format('MMM')} '${dayjs(Number(value)).format('YY')}`
              }
            },
            interval: this.calcInterval(), // 间隔天数
            fontFamily: 'Lucida Grande'
          },
          axisLine: {
            lineStyle: {
              color: '#ccd6eb'
            }
          },
          min: function (value) {
            if (value.max <= 31) {
              console.log('min-----' + value.min)
              return value.min
            } else {
              return value.min - 10
            }
          },
          max: function (value) {
            console.log('max-----' + value.max)
            if (value.max == 30) {
              return value.max + 1
            } else {
              return value.max
            }
          },
          axisTick: {
            show: true,
            alignWithLabel: true
          }
        },
        yAxis: {
          splitNumber: 3,
          axisLabel: {
            color: '#666666',
            fontSize: 10,
            formatter: function (value, index) {
              var value
              if (value >= 1000) {
                value = value / 1000 + 'k'
              } else if (value < 1000) {
                value = value
              }
              return value
            }
          }
        },
        legend: {
          show: false,
          selected: {
            line1: this.infoData.selected_date_range === 1,
            line2: this.infoData.selected_date_range_one_year_ago === 1
          }
        },
        series: [
          {
            type: 'line',
            name: 'line1',
            showSymbol: false,
            data: units_orderedList,
            itemStyle: {
              normal: {
                color: '#00a4b4',
                lineStyle: {
                  color: '#00a4b4'
                }
              }
            }
          },
          {
            type: 'line',
            name: 'line2',
            showSymbol: false,
            data: last_units_orderedList,
            itemStyle: {
              normal: {
                color: '#e02d00',
                lineStyle: {
                  color: '#e02d00'
                }
              }
            }
          }
        ]
      }
      option && myChart.setOption(option)
    },
    initEcharts2 () {
      var chartDom = document.getElementById('chart2')
      var myChart = echarts.init(chartDom)
      var option

      const dateList = this.datas.map(function (item) {
        return item.date
      })
      const ordered_product_salesList = this.datas.map(function (item) {
        return item.ordered_product_sales
      })
      const last_ordered_product_salesList = this.datas.map(function (item) {
        return item.last_ordered_product_sales
      })
      const isSameMonth = dayjs(this.queryParams.time_begin).isSame(dayjs(this.queryParams.time_end), 'month')
      option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: '10%',
          left: '5%',
          right: '0%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: {
          data: dateList,
          axisLabel: {
            color: '#666666',
            formatter: function (value, index) {
              if (isSameMonth) {
                return `${dayjs(Number(value)).format('D')}. ${dayjs(Number(value)).format('MMM')}`
              } else {
                const currentTimestamp = dateList[index]
                return `${dayjs(Number(currentTimestamp)).format('MMM')} '${dayjs(Number(currentTimestamp)).format('YY')}`
              }
            },
            interval: this.calcInterval() // 间隔天数
          },
          max: function (value) {
            console.log('max-----' + value.max)
            if (value.max == 30) {
              return value.max + 1
            } else {
              return value.max
            }
          },
          axisLine: {
            lineStyle: {
              color: '#ccd6eb'
            }
          },
          min: function (value) {
            if (value.max <= 31) {
              return value.min
            } else {
              return value.min - 10
            }
          },
          axisTick: {
            show: true,
            alignWithLabel: true
          }
        },
        yAxis: {
          splitNumber: 3,
          axisLabel: {
            color: '#666666',
            fontSize: 10,
            formatter: function (value, index) {
              var value
              if (value >= 1000) {
                value = value / 1000 + 'k'
              } else if (value < 1000) {
                value = value
              }
              return value
            }
          }
        },
        legend: {
          show: false,
          selected: {
            line1: this.infoData.selected_date_range === 1,
            line2: this.infoData.selected_date_range_one_year_ago === 1
          }
        },
        series: [
          {
            type: 'line',
            name: 'line1',
            showSymbol: false,
            data: ordered_product_salesList,
            itemStyle: {
              normal: {
                color: '#00a4b4',
                lineStyle: {
                  color: '#00a4b4'
                }
              }
            }
          },
          {
            type: 'line',
            name: 'line2',
            showSymbol: false,
            data: last_ordered_product_salesList,
            itemStyle: {
              normal: {
                color: '#e02d00',
                lineStyle: {
                  color: '#e02d00'
                }
              }
            }
          }
        ]
      }
      option && myChart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.ant-select-selection {
  border-color: #aab7b8;
}

/deep/.ant-select-selection-selected-value {
  color: #052f37;
}

.business-reports {
  .container {
    display: flex;

    .menu-wrapper {
      flex: none;
      width: 225px;
      box-sizing: border-box;
      background-color: #fafafa;
      padding: 20px;

      .close-menu {
        display: flex;
        align-items: center;
        margin-left: 5px;
        margin-bottom: 24px;
        padding-top: 10px;

        img {
          width: 14px;
        }

        span {
          color: #008296;
          font-size: 12px;
          line-height: 12px;
          font-weight: 400;
          margin-left: 5px;
        }
      }

      .list {
        .caption {
          background-color: #e3eced;
          font-size: 14px;
          color: #002f36;
          line-height: 20px;
          padding-top: 2%;
          padding-bottom: 2%;
          padding-left: 10px;
          margin: 4px 0px 8px;
        }

        .c-title {
          padding-left: 10px;
          color: rgb(0, 47, 54);
          font-size: 13px;
          line-height: 18px;
          margin-bottom: 16px;
        }

        ul {
          li {
            padding: 0% 5% 5% 10%;
            line-height: 18px;
            font-size: 13px;
            color: #008296;

            &.active {
              color: black;
              font-weight: bold;
            }
          }
        }
      }
    }

    .content {
      flex: 1;
      padding-top: 25px;
      padding-left: 25px;
      padding-bottom: 25px;
      min-width: 450px;

      .btn {
        box-shadow: 0px 1px 2px 0px rgba(181, 181, 181, 1);
        padding: 8px 24px;
        background-color: rgb(0, 130, 150);
        font-size: 13px;
        font-weight: 400;
        line-height: 17px;
        color: #fff;
        border-radius: 2px;
        margin-right: 10px;

        &.light {
          background-color: rgb(227, 236, 237);
          color: rgb(0, 47, 54);
        }
      }

      .head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        height: 48px;
        margin-bottom: 10px;

        .head-left {
          padding: 0 10px;

          .title {
            color: #002f36;
            font-size: 24px;
            font-weight: 400;
            line-height: 40px;
          }

          .more {
            padding-top: 13px;
            margin-left: 3px;
            font-size: 13px;
            color: rgb(0, 130, 150);
          }
        }

        .head-right {
          padding: 0 10px;
          display: flex;
        }
      }

      .filter-wrapper {
        background-color: #e3eced;
        padding: 20px;
        display: flex;
        align-items: flex-start;

        .filter-item {
          margin-right: 20px;

          .label {
            font-size: 13px;
            line-height: 18px;
            font-weight: 700;
            color: rgb(0, 47, 54);
          }
        }

        .date-range {
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
          margin-top: 5px;

          .date-item {
            position: relative;
            width: 140px;
            height: 34px;
            display: flex;
            border: 1px solid #aab7b8;
            background-color: #fff;

            .date-item-left {
              width: 34px;
              border-right: 1px solid #aab7b8;
              display: flex;
              align-items: center;
              justify-content: center;

              img {
                display: block;
                margin-left: 2px;
              }
            }

            .date-item-right {
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #052f37;
            }
          }

          .a-date-picker {
            opacity: 0;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
          }
        }
      }

      .snapshot {
        background-color: #fff;
        border: 1px solid #d5dbdb;
        margin: 5px 0;

        .snapshot-head {
          height: 45px;
          display: flex;
          align-items: center;
          background-color: #fafafa;

          .tit {
            font-size: 18px;
            font-weight: 700;
            color: rgb(0, 47, 54);
            margin-left: 15px;
            margin-top: -4px;
          }

          .tit_s {
            font-size: 13px;
            color: rgb(0, 47, 54);
            font-weight: 400;
            margin-left: 15px;
            margin-top: -4px;
          }
        }

        .snapshot-cont {
          border-top: 1px solid #d5dbdb;

          ul {
            display: flex;

            li {
              color: rgb(0, 47, 54);
              padding-top: 5px;
              padding-bottom: 5px;
              padding-left: 20px;
              min-width: 200px;

              .name {
                font-size: 13px;
                line-height: 20px;
                display: block;
              }

              .txt {
                font-size: 20px;
                line-height: 20px;
                font-weight: 700;
                display: block;
                margin-bottom: 8px;
              }
            }
          }
        }
      }

      .chart-wrap {
        margin-top: 20px;
        display: flex;
        background-color: #fff;

        .chart-item {
          flex: 1;
          padding: 0 10px;
          box-sizing: border-box;
          border: 1px solid rgb(218, 218, 218);
          height: 300px;
          position: relative;

          &:first-child {
            border-right: 0;
          }

          .chart-title {
            position: absolute;
            transform: rotate(270deg) translateX(-50%);
            transform-origin: 0% 0%;
            text-anchor: middle;
            left: 24px;
            top: 50%;
            font-size: 12px;
            color: #666666;
          }

          .chart-box {
            height: 100%;
          }
        }
      }

      .azure {
        border: 1px solid #d5dbdb;
        background-color: #f5f9fa;
        padding: 20px;

        .azure-head {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;

          .tit {
            font-size: 18px;
            font-weight: 700;
            color: rgb(0, 47, 54);
            padding: 0 10px;
          }

          .btns {
            display: flex;
            border-radius: 4px;

            .azure-btn {
              line-height: 34px;
              width: 117px;
              color: rgb(0, 47, 54);
              border: 1px solid rgb(213, 219, 219);
              text-align: center;

              &:first-child {
                border-right: none;
              }

              &.active {
                background-color: rgb(0, 130, 150);
                border-color: rgb(0, 130, 150);
                color: #fff;
              }
            }
          }
        }

        .azure-compare {
          display: flex;

          .compare-item {
            margin-top: 15px;
            padding-right: 20px;
            padding-left: 15px;
            padding-bottom: 10px;
            display: flex;
            border-right: 1px solid rgb(218, 218, 218);

            .select {
              width: 16px;
              height: 16px;
              border: 1px solid rgb(0, 130, 150);
              display: flex;
              align-items: center;
              justify-content: center;

              img {
                width: 12px;
              }
            }

            .cont {
              padding: 0 10px;

              .tit {
                color: rgb(0, 164, 180);
                font-size: 13px;
                font-weight: 400;
                line-height: 18px;
              }

              .tit_s {
                font-size: 13px;
                line-height: 18px;
                color: rgb(0, 47, 54);

                span {
                  color: rgb(128, 128, 128);
                  margin-left: 4px;
                }
              }
            }

            &.caption {
              display: block;
              width: 200px;

              .caption-tit {
                color: rgb(0, 47, 54);
                font-size: 16px;
                font-weight: 400;
                line-height: 20px;
                margin-bottom: 8px;
              }

              .what {
                display: block;
                color: rgb(0, 130, 150);
                font-size: 13px;
                line-height: 18px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
